<div class="container" xmlns="http://www.w3.org/1999/html">

  <div class="row">
    <div class="col-md-12">
      <hr class="tall">
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h1 class="mb-none"><strong></strong></h1>
      <p></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h1 class="mb-none"><strong></strong></h1>
      <p></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h1 class="mb-none"><strong></strong></h1>
      <p></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li class="point" id="point{{i}}" *ngFor="let subImg of subImageList;let i = index;"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item"  id="img{{i}}" *ngFor="let subImg of subImageList;let i = index;">
              <img class="slide-image" style=" height: 400px;width: 550px;" [src]="subImg" alt="产品图片">
            </div>
        </div>
        <a class="left carousel-control" href="javascript:$('.carousel').carousel('prev')">
          <!--<span class="fa fa-arrow-left"></span>-->
        </a>
        <a class="right carousel-control"  href="javascript:$('.carousel').carousel('next')">
          <!--<span class="fa fa-arrow-right"></span>-->
        </a>
      </div>
    </div>

    <div class="col-md-6">

      <div class="summary entry-summary">

        <h3 class="mb-none"><strong>{{product.name}}</strong></h3>
        <br>
        <div class="review_num">
          <span class="count" itemprop="ratingCount">评价星级</span>
        </div>

        <div title="5星好评" class="star-rating">
          <span style="width:100%"></span>
        </div>

        <p class="price">
          <span class="amount">￥{{product.price}}</span>
        </p>

        <h5>库存：
          <span>{{product.stock}}</span>
        </h5>

        <p class="taller">{{product.subtitle}}</p>

        <form class="cart">
          <div class="quantity">
            <input type="button" (click)="sub()" class="minus" value="-">
            <input type="text" class="input-text qty" title="数量" [ngModelOptions]="{standalone: true}" [(ngModel)]="quantity" (change)="quantityChange()">
            <input type="button" (click)="add()" class="plus" value="+">
          </div>
          <button class="btn btn-primary" type="button" (click)="addToCart()">加入购物车</button>
        </form>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="tabs tabs-product">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#productDescription" data-toggle="tab">商品详情</a></li>
          <li><a href="#productInfo" data-toggle="tab">商品参数</a></li>
          <li><a href="#productReviews" data-toggle="tab">网友评论</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="productDescription">
            <p>{{product.detail}}</p>
          </div>
          <div class="tab-pane" id="productInfo">
            <table class="table table-striped mt-xl">
              <tbody>
              <tr>
                <th>
                  尺寸:
                </th>
                <td>
                  15.6
                </td>
              </tr>
              <tr>
                <th>
                  颜色
                </th>
                <td>
                  红色
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="tab-pane" id="productReviews">
            <ul class="comments">
              <li>
                <div class="comment">
                  <div class="img-thumbnail">
                    <img class="avatar" alt="" src="http://placehold.it/100x100">
                  </div>
                  <div class="comment-block">
                    <div class="comment-arrow"></div>
                    <span class="comment-by">
															<strong>张三</strong>
															<span class="pull-right">
																<div title="Rated 5.00 out of 5" class="star-rating">
																	<span style="width:100%"></span>
																</div>
															</span>
														</span>
                    <p>非常好看，质量也好</p>
                  </div>
                </div>
              </li>
            </ul>
            <hr class="tall">

          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <hr class="tall">

      <h4 class="mb-md text-uppercase">猜你喜欢</h4>

      <div class="row">

        <ul class="products product-thumb-info-list">
          <li class="col-sm-3 col-xs-12 product">
            <a href="javascript:">
              <span class="onsale">热</span>
            </a>
            <span class="product-thumb-info">
											<a href="javascript:" class="add-to-cart-product">
												<span><i class="fa fa-shopping-cart"></i>加入购物车</span>
											</a>
											<a href="javascript:">
												<span class="product-thumb-info-image">
													<span class="product-thumb-info-act">
														<span class="product-thumb-info-act-right"><em><i class="fa fa-search-plus"></i>查看详情</em></span>
													</span>
													<img alt="" class="img-responsive" src="http://placehold.it/400x400">
												</span>
											</a>
											<span class="product-thumb-info-content">
												<a href="javascript:">
													<h4>2018新款照相机</h4>
													<span class="price">
														<del><span class="amount">￥325</span></del>
														<ins><span class="amount">￥299</span></ins>
													</span>
												</a>
											</span>
										</span>
          </li>
          <li class="col-sm-3 col-xs-12 product">
										<span class="product-thumb-info">
											<a href="javascript:" class="add-to-cart-product">
												<span><i class="fa fa-shopping-cart"></i>加入购物车</span>
											</a>
											<a href="javascript:">
												<span class="product-thumb-info-image">
													<span class="product-thumb-info-act">
														<span class="product-thumb-info-act-right"><em><i class="fa fa-plus"></i>查看详情</em></span>
													</span>
													<img alt="" class="img-responsive" src="http://placehold.it/400x400">
												</span>
											</a>
											<span class="product-thumb-info-content">
												<a href="javascript:">
													<h4>学生衬衫</h4>
													<span class="price">
														<span class="amount">￥72</span>
													</span>
												</a>
											</span>
										</span>
          </li>
          <li class="col-sm-3 col-xs-12 product">
										<span class="product-thumb-info">
											<a href="javascript:" class="add-to-cart-product">
												<span><i class="fa fa-shopping-cart"></i>加入购物车</span>
											</a>
											<a href="javascript:">
												<span class="product-thumb-info-image">
													<span class="product-thumb-info-act">
														<span class="product-thumb-info-act-right"><em><i class="fa fa-plus"></i>查看详情</em></span>
													</span>
													<img alt="" class="img-responsive" src="http://placehold.it/400x400">
												</span>
											</a>
											<span class="product-thumb-info-content">
												<a href="javascript:">
													<h4>杯子</h4>
													<span class="price">
														<span class="amount">￥60</span>
													</span>
												</a>
											</span>
										</span>
          </li>
          <li class="col-sm-3 col-xs-12 product">
										<span class="product-thumb-info">
											<a href="javascript:" class="add-to-cart-product">
												<span><i class="fa fa-shopping-cart"></i>加入购物车</span>
											</a>
											<a href="javascript:">
												<span class="product-thumb-info-image">
													<span class="product-thumb-info-act">
														<span class="product-thumb-info-act-right"><em><i class="fa fa-plus"></i>查看详情</em></span>
													</span>
													<img alt="" class="img-responsive" src="http://placehold.it/400x400">
												</span>
											</a>
											<span class="product-thumb-info-content">
												<a href="javascript:">
													<h4>韩版背包</h4>
													<span class="price">
														<span class="amount">￥199</span>
													</span>
												</a>
											</span>
										</span>
          </li>
        </ul>

      </div>
    </div>
  </div>
</div>
